<template>
  <div class="recent-posts" id="recent-posts">
    <category-bar></category-bar>
    <!-- card，需要添加在没有图片时使用随机图片 -->
    <div :class="['recent-post-item' , 'col2' , 'top' , index % 2 === 0 ? 'odd' : 'even']"
         v-for="(indexPost , index) in indexPostList" :key="index"
         @click="toPath('article?id=' + indexPost.id)">
      <div class="post_cover left_radius">
        <a href="javascript:void(0);" :title="indexPost.title" @click="toPath('article?id=' + indexPost.id)">
          <img class="post_bg" :alt="indexPost.title"
               :src="indexPost.image ? indexPost.image : '/src/assets/images/404s.gif'"/>
        </a>
      </div>
      <div class="recent-post-info">
        <div class="recent-post-info-top">
          <div class="recent-post-info-top-tips">
            <span class="original" @click="toPath('categories?id=' + indexPost.category.id)">
              {{ indexPost.category.content }}
            </span>
            <a class="unvisited-post" href="javascript:void(0);" :title="indexPost.title"
               @click="toPath('article?id=' + indexPost.id)">
              未读
            </a>
          </div>
          <a class="article-title" href="javascript:void(0);" :title="indexPost.title"
             @click="toPath('article?id=' + indexPost.id)">
            {{ indexPost.title }}
          </a>
          <div class="content">
            {{ indexPost.content }}
          </div>
        </div>
        <div class="article-meta-wrap">
          <!-- tag -->
          <span class="article-meta tags">
            <a class="article-meta__tags" href="javascript:void(0);" v-for="(tag , tagIndex) in indexPost.tagList"
               :key="tagIndex" @click="toPath('tags?id=' + tag.id)" :title="tag.content">
              <span class="tags-punctuation">{{ tag.content }}</span>
            </a>
          </span>
          <!-- 创建时间 -->
          <span class="post-meta-date">
            <i class="far fa-calendar-alt"></i>
            <time style="display: inline;" :datetime="indexPost.datetime"
                  :title="indexPost.datetime + '创建'">{{ indexPost.datetime }}</time>
          </span>
        </div>
      </div>
    </div>
    <pagination v-model:page-index="query.pageIndex" :page-size="query.pageSize" :data-count="query.total"
                @page-index-change="getList" @page-size-change="getList">
    </pagination>
  </div>
</template>

<script setup>
import {computed, ref} from 'vue';
import {useRouter} from 'vue-router';
import store from "../../store/index.js";
import categoryBar from "../../components/categoryBar/index.vue";
import pagination from "../../components/pagination/index.vue";

const router = useRouter();

const indexPostList = computed(() => store.state.data.indexPostList);

const query = ref({
  pageIndex: 1,
  pageSize: 12,
  total: 492,
})

const toPath = (path) => {
  router.push(path)
}

const getList = () => {
  console.log(query.value)
}
</script>

<style scoped>
#recent-posts > .recent-post-item:not(a)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background: linear-gradient(to right, transparent, white, transparent);
  transform: translateX(-200%);
  transition: transform 0.5s linear;
  z-index: 1;
}

#recent-posts > .recent-post-item:not(a):hover::before {
  transform: translateX(100%) skewX(-60deg);
}
</style>